<template>
    <div>
      <!--导航栏-->
      <Head></Head>
      <Adaption>
        <h2 align="center">本网站支持如下的线性代数计算</h2>
        <div>
          <el-tabs type="card" value="det" @tab-click="handleClick">
            <el-tab-pane label="行列式的计算" name="det">
            </el-tab-pane>
            <el-tab-pane label="矩阵相加" name="addMatrix"></el-tab-pane>
            <el-tab-pane label="矩阵相乘" name="mulMatrix"></el-tab-pane>
            <el-tab-pane label="矩阵转置" name="transposeMatrix"></el-tab-pane>
            <el-tab-pane label="求逆矩阵" name="inverseMatrix"></el-tab-pane>
            <el-tab-pane label="求矩阵的秩" name="rankMatrix"></el-tab-pane>
            <el-tab-pane label="求矩阵的特征值" name="eigMatrix"></el-tab-pane>
          </el-tabs>
        </div>
        <div>
          <ThreeMatrixs :type=type ref="three" v-show=this.three>
            <CalculateFormat slot="format"></CalculateFormat>
          </ThreeMatrixs>
          <TwoMatrixs :type="type" ref="two" v-show=this.two>
            <CalculateFormat slot="format"></CalculateFormat>
          </TwoMatrixs>
        </div>
      </Adaption>
      <CalculateBottom></CalculateBottom>
    </div>
</template>

<script>
import Head from '../base/Head'
import Adaption from '../base/Adaption'
import ThreeMatrixs from '../base/ThreeMatrixs'
import CalculateFormat from '../base/CalculateFormat'
import TwoMatrixs from '../base/TwoMatrixs'
export default {
  name: 'Calculate',
  components: {TwoMatrixs, CalculateFormat, ThreeMatrixs, Adaption, Head},
  data () {
    return {
      type: 'det',
      two: true,
      three: false
    }
  },
  methods: {
    handleClick (tab) {
      this.type = tab.name
      if (this.type === 'addMatrix' || this.type === 'mulMatrix') {
        this.two = false
        this.three = true
        this.$refs.three.matrix1 = ''
        this.$refs.three.matrix2 = ''
        this.$refs.three.result = '结果'
      } else {
        this.three = false
        this.two = true
        this.$refs.two.matrix = ''
        this.$refs.two.result = '结果'
      }
    }
  }
}
</script>

<style scoped>
  h2{
    margin-top:4%;
  }
  .el-tabs{
    margin-top: 3%;
  }
</style>
